.SetupWizard__SideBar {
	&.SetupWizard__SideBar {
		display: flex;
		overflow: hidden;
		flex: 0 1 350px;

		max-height: 100vh;
		flex-flow: column nowrap;
	}

	.SetupWizard__SideBar-header {
		display: flex;

		margin: 2rem 1.625rem;
		align-items: center;
		flex-flow: row wrap;
	}

	.SetupWizard__SideBar-headerLogo {
		width: auto;
		height: 1.5rem;
		margin: 0.25rem 0.375rem;
	}

	.SetupWizard__SideBar-headerTag {
		margin: 0.25rem 0.375rem;

		padding: 4px 8px;

		white-space: nowrap;

		text-transform: uppercase;

		color: var(--color-white);

		border-radius: 50px;
		background-color: var(--color-dark);

		font-size: 10px;

		line-height: 1rem;
	}

	.SetupWizard__SideBar-content {
		flex: 1;

		margin: 0 0 1rem;
		padding: 0 2rem;
	}

	.SetupWizard__SideBar-title {
		margin-bottom: 1rem;

		letter-spacing: 0.03rem;

		color: var(--color-dark);

		font-size: 2rem;

		font-weight: 600;

		line-height: 2.6rem;
	}

	.SetupWizard__SideBar-text {
		margin-bottom: 3rem;

		color: var(--color-gray);

		font-size: 1rem;

		font-weight: 500;

		line-height: 1.5rem;
	}

	.SetupWizard__SideBar-step {
		position: relative;

		margin: 0 -0.5rem 2rem;

		color: var(--color-dark-10);

		font-size: 0.875rem;
		font-weight: 500;

		&::before {
			display: inline-flex;

			width: 1.5rem;
			height: 1.5rem;
			margin: 0 0.5rem;

			content: attr(data-number);

			color: var(--color-dark-10);

			border: 1px solid var(--color-dark-10);
			border-radius: 9999px;

			font-size: 0.75rem;
			align-items: center;
			justify-content: center;
		}

		&::after {
			position: absolute;
			bottom: -2rem;
			left: 1.2rem;

			display: block;

			width: 0.0625rem;
			height: 2rem;

			content: '';

			background-color: var(--color-dark-10);
		}

		&:last-child {
			margin-bottom: 0;

			&::after {
				display: none;
			}
		}

		&--active {
			color: var(--rc-color-button-primary);

			&::before {
				color: var(--rc-color-button-primary);
				border-color: var(--rc-color-button-primary);
				background-color: transparent;
			}
		}

		&--past {
			color: var(--rc-color-primary);

			&::before {
				color: var(--rc-color-content);
				border-color: var(--rc-color-button-primary);
				background-color: var(--rc-color-button-primary);
			}

			&::after {
				background-color: var(--rc-color-button-primary);
			}
		}

		.rtl &::after {
			right: 1.2rem;
			left: auto;
		}
	}
}

@media (width <= 760px) {
	.SetupWizard__SideBar {
		&.SetupWizard__SideBar {
			flex-basis: auto;
		}

		.SetupWizard__SideBar-content {
			display: none;
		}
	}
}
